import React, { PureComponent } from 'react'
import { ListItem, ListInfo, LoadMore } from '../style'
import { connect } from "react-redux"
import { getMoveList } from '../store'
import { Link } from 'react-router-dom'
class List extends PureComponent {

    constructor(props) {
        super(props)
        this.state = {

        }
    }

    render() {
        const { list, getMoreList, page } = this.props;
        return (
            <div>
                {
                    list.map((item, index) => {
                        return (
                            <Link key={index} to={'/detail/' + item.get('id')}>
                                <ListItem>
                                    <img className="pic" src={item.get('imgUrl')} alt='' />
                                    <ListInfo>
                                        <h3 className='title'>{item.get('title')}</h3>
                                        <p className='desc'>
                                            {item.get('desc')}
                                        </p>
                                    </ListInfo>
                                </ListItem>
                            </Link>
                        )
                    })
                }
                <LoadMore onClick={() => getMoreList(page)}>阅读更多</LoadMore>
            </div>
        )
    }
}
function mapStateToProps(state, props) {
    return {
        // list: state.get('home').get('articleList')
        list: state.getIn(['home', 'articleList']),
        page: state.getIn(['home', 'articlePage'])
    }
}
const mapDispatchToProps = (dispatch) => ({
    getMoreList(page) {
        dispatch(getMoveList(page))
    }
})
export default connect(mapStateToProps, mapDispatchToProps)(List)
